<template>
	<el-main v-loading="loading">
		<el-form :model="formData" ref="searchs" class="searchBox">
			<el-form-item>
				<el-select
					class="selectStyle"
					v-model="formData.status"
					prop="resourceState"
					placeholder="通知状态"
					size="small"
					@change="checkState">
					<el-option value="">全部</el-option>
					<el-option
						v-for="item in noticeStateList"
						:key="item.status"
						:label="item.name"
						:value="item.status">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item prop="noticeTitle" can-be-empty class="searchBox_item">
				<el-input class="noticeTitle" placeholder="通知标题" size="small" v-model="formData.noticeTitle"></el-input>
			</el-form-item>
			<el-form-item class="searchBox_item">
				<el-button type="primary"  size="small" @click="search()">搜索</el-button>
				<el-button type="primary" size="small" @click="openAdd()">发布通知</el-button>
			</el-form-item>
		</el-form>

		<el-table
			:data="dataList"
			border
			height="640"
			style="width: 100%"
			:header-cell-style="{background:'#afafaf',color:'#606266'}"
			ref="multipleTable"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="50" align="center"></el-table-column>
			<el-table-column prop="noticeTitle" align="center" label="通知标题"></el-table-column>
			<el-table-column prop="iconUrl" align="center" label="通知图标">
				<template slot-scope="scope">
					<img v-image-preview :src="scope.row.iconUrl" v-if="scope.row.iconUrl" width="50" />
				</template>
			</el-table-column>
			<el-table-column prop="detailUrl" align="center" label="通知内容图片">
				<template slot-scope="scope">
					<img v-image-preview :src="scope.row.detailUrl" v-if="scope.row.detailUrl" width="50" />
				</template>
			</el-table-column>
			<el-table-column prop="status" align="center" label="通知状态">
				<template slot-scope="scope">
					<el-switch
						v-model="scope.row.status"
						active-value="GROUNDED"
						inactive-value="UNGROUNDED"
						@change="setStatus(scope.row)">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" align="center" label="创建时间">
				<template slot-scope="scope">
					<span>{{$timeUtil.getFormatTime(scope.row.createTime)}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="updateTime" align="center" label="修改时间">
				<template slot-scope="scope">
					<span>{{$timeUtil.getFormatTime(scope.row.updateTime)}}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作" width="150" align="center">
				<template slot-scope="scope">
					<router-link  type="primary" round  :to="{name: 'LABEL_ADD', query: {labelInfo: scope.row}}">
						<el-button type="text" size="small">编辑</el-button>
					</router-link>
				</template>
			</el-table-column> -->
		</el-table>

		<div class="footer flex-between">
			<el-checkbox
				:disabled="!dataList.length"
				v-model="checkAll"
				@change="handleCheckAllChange"
			>全选</el-checkbox>
			<el-pagination
				@current-change="handleCurrentChange"
				:current-page="formData.page"
				:page-size="10"
				background
				:disabled="!dataList.length"
				layout="total, prev, pager, next, jumper"
				:total="count">
			</el-pagination>
		</div>

		<el-dialog title="编辑通知信息" :visible.sync="openAddPage">
			<noticeAdd @func="getMsgFormSon"></noticeAdd>
		</el-dialog>
	</el-main>
</template>

<script>
    import {
        labelListByParent,
        labelListAll,
        setLabelState,
        changeSort,
        noticeList,
        noticeState
    } from "@/api/table";
    import noticeAdd from "./noticeAdd";
    export default {
        name: "NOTICE_LIST",
        components: {noticeAdd},
        data() {
            return {
                formData:{
                    status:"",
                    noticeTitle:'',
                    page:1,
                },
                cardList:[],
                labelList:[],
                labelTypes: {
                    "1":"标签类型1" ,
                    "2":"标签类型2" ,
                    "3":"标签类型3" ,
                    "4":"标签类型3" ,
                },
                //分页
                count: 6,
                multipleSelection: [],
                checkAll: false,
                //树形所需
                defaultProps: {
                    children: "child",
                    label: "labelText"
                },
                //系统通知列表
                dataList:[],
                noticeStateList:[
                    {
                        status:"GROUNDED",
                        name:"上架",
                    },
                    {
                        status:"UNGROUNDED",
                        name:"下架",
                    }
                ],
                /*打开编辑页面*/
                openAddPage:false,
                loading: true
            }

        },
        props: {
            checkItem: Boolean,
            selectArr: Array
        },
        created() {
            this.init();
        },
        methods: {
            init(){
                //获取用户信息，加载表格数据
                let data = JSON.parse(JSON.stringify(this.formData));
                data.page --;
                // 加载表格数据
                //遍历所有标签，进行标签树组装
                noticeList(data).then(res => {
                    if(res.code == 200){
                      //重组标签树
                      this.dataList = res.data;
                      this.count = this.dataList.length;
                    }

                    if (this.loading) {
                      this.loading = false
                    }
                }).catch(err => {});
            },
            search(){
                this.init()
            },
            //监听选择的内容
            handleSelectionChange(val) {
                //val 为选中数据的集合
                this.multipleSelection = val;
                this.checkAll = this.dataList.length === val.length
            },
            //加载第几页
            handleCurrentChange(val) {
                this.formData.page = val;
                //修改页数，重新加载
                this.init();
            },
            // 全选
            handleCheckAllChange(val) {
                if (this.checkAll) {
                    this.$refs.multipleTable.toggleAllSelection();
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            checkState (noticeInfo){
                console.log(noticeInfo)
                this.init();
            },
            //启用禁用：
            setStatus(row) {
                noticeState({ noticeId: row.noticeId,status:row.status })
                    .then(res => {
                        if(res.code == 200){
                            this.$message({
                                type: "success",
                                message: "操作成功"
                            });
                            this.init();
                        }
                    })
                    .catch(err => {});
            },
            /*打开资源编辑弹出层*/
            openAdd(){
                this.openAddPage = true;
            },
            getMsgFormSon(data){
                data.refresh && this.init();
                this.openAddPage = data.action;
            },
        },
    }
</script>

<style lang="scss" scoped>

  .header {
    margin-top: 20px;
    margin-bottom: 20px;
    .inputs {
      width: 260px;
      margin-right: 20px;
    }
    .times {
      width: 320px;
      margin-right: 20px;
    }
  }
  .treeStyle{
    margin-top: 100px;
    width: 15%;
    float: left;
  }
  .tableStyle{
    width: 85%;
    float: right;
  }
</style>
